<template>
  <div class="index ">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <router-link class="powertopli teamlei" to="/callsystem/newcalls/guanlizhongxin">任务管理</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/renwuexcel">数据报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/peoexcel">人员报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/yingxiaoexcel">营销任务报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/addpeo">外呼人员管理</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/addphone">外呼号码管理</router-link>
            </div>
          </div>
        </div>
        <div class="con" >
          <div style="margin-top: 7px;display: flex;margin-bottom: 40px;justify-content: space-between;">
            <div style="display: flex;">
              <shaixuancreate style="margin-right: 20px;" @shaixuanup="shaixuanup" />
              <daorucreate style="margin-right: 20px;" @daoruup="daoruup"  />
              <!-- <daorucreate @daoruup="daoruup" type="yingxiao" />  -->
            </div>
            <rwtype  />
          </div>
          <div class="t_search_box">
            <el-input style="width: 240px;" class="t_search_input" v-model.trim="formInline.name" placeholder="任务名称"></el-input>
            <el-select style="margin-left: 10px;margin-right: 10px;" clearable  v-model="formInline.type" placeholder="任务类型">
              <el-option
                v-for="(item,index) in taskTypeList"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="formInline.createtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="创建时间">
            </el-date-picker>

            <el-button type="danger" style="margin-left: 10px;" @click="clearbtn" plain round >清空</el-button>
            <el-button type="danger" style="background-color: #2974FF;" @click="searchbtn" round >搜索</el-button>
          </div>
        </div>
        <div class="fenline" ></div>
        <div class="con">
          <div style="display: flex;justify-content: space-between;">
            <div class="powertopcon">
                <div  class="powertopli " :class="formInline.is_finish == 1?'powertopli_lei':''" @click="change(1)" >
                  进行中的任务
                  <div class="t_under_line t_under_line2 " :class="formInline.is_finish == 1?'t_under_line_lei':''"></div>
                </div>
                <div  class="powertopli" :class="formInline.is_finish == 2?'powertopli_lei':''" @click="change(2)" >
                  已完成的任务
                  <div class="t_under_line t_under_line2 " :class="formInline.is_finish == 2?'t_under_line_lei':''"></div>
                </div>
            </div>
            <el-button type="primary" plain round @click="dload2" style="align-self:end" >下载导入结果模板</el-button>
          </div>
          <div>
            <el-table
            v-loading='loading'
            :header-cell-style="{ 
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="name"
                align="center"
                label="任务名称">
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="创建时间">
              </el-table-column>
              <el-table-column
                prop="type_name"
                align="center"
                label="创建方式">
                <template slot-scope="scope">
                  
                  <span v-if="scope.row.type == 2">导入创建</span>
                  <span v-else-if="scope.row.type == 3">创建营销</span>
                  <span v-else>普通创建</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="type_name"
                align="center"
                label="任务类型">
              </el-table-column>
              <!-- <el-table-column
                prop="aim"
                align="center"
                label="外呼目标">
              </el-table-column> -->
              <!-- <el-table-column
                prop="end_time"
                align="center"
                label="截止时间">
              </el-table-column> -->
              <el-table-column
                prop="remark"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <div v-if="scope.row.type == 3" @click="importId(scope.row.id)" style="display: inline-block;">
                    <upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="export_data2"></upload-excel-component>
                  </div>
                  <el-button type="text" @click="detail(scope.row.id,scope.row.name)">详情</el-button>
                  <div @click="importId(scope.row.id)" style="display: inline-block;">
                    <upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="export_data"></upload-excel-component>
                  </div>
                  <el-button style="margin-left: 10px;" type="text" @click="deltask(scope.row.id)">删除</el-button>
                  <el-button style="margin-left: 10px;" type="text" v-if="formInline.is_finish == 1" @click="wancheng(scope.row.id)">已完成</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="formInline.pageSize"
                layout="total,prev, pager, next"
                :total="total"
                prev-text="上一页" next-text="下一页">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="完成确认" center :visible.sync="wanchenglog" :close-on-press-escape="false" :close-on-click-modal="false" width="400px">
            <div style="text-align: center;">
               确认将该任务修改为已完成么？
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="danger" style="background-color: #2974FF;" round @click="wanchenggo">确认</el-button>
              <el-button type="info" round @click="wanchenglog = false">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="追加结果" center :visible.sync="isshowzjrest"  width="800px">
            <div>
              {{ zjfail }}
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="danger" style="background-color: #2974FF;" round @click="isshowzjrest = false">确认</el-button>
             
            </span>
        </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";
  import shaixuancreate from "./shaixuancreate.vue"
  import daorucreate from "./daorucreate.vue"
  import rwtype from "./rwtype.vue"

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent,
      shaixuancreate,
      daorucreate,
      rwtype
    },
    name: 'quanyi',
    data() {
      return {
        
        shopid:'',
        formInline:{
          name: '',
          type: '',
          createtime: '',
          is_finish:1,
          page:1,
          pageSize:20
        },
        tableData: [],
        total:0,
        isloadquan:false,
        taskTypeList:[],
        id:'',
        export_data: '导入结果',
        export_data2: '追加导入',
        loading:false,
        wanchenglog:false,
        task_id:'',
        url: '',
        zjfail:'',
        isshowzjrest:false,
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.url = window.location.origin+"/91haoka_platform/"
      //列表
      this.getlist()
      //获取产品类型
      this.getproductstype()
     
    },
    methods: {
      //获取产品类型
      getproductstype:function(){
        var that = this
        axios.get("/api/plan-market/call/config/list/v2")
          .then(function(response) {
            if(response.data.msg.code == 0){
              that.taskTypeList = response.data.data
            }else{
              that.$message.error(response.data.msg.info);
            }

          })
      },
      //搜索
      searchbtn(){
        this.formInline.page = 1
        //列表
        this.getlist()
      },
      //列表
      getlist(){
        
        if(this.formInline.createtime == null){
          this.formInline.createtime = ''
        }
        this.loading = true
        axios.get('/api/plan-market/call/task/list/v2',{
          params:{
            created_at:this.formInline.createtime,
            name:this.formInline.name,
            type:this.formInline.type,
            is_finish:this.formInline.is_finish,
            page:this.formInline.page,
            page_size:this.formInline.pageSize,
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('列表==')
              console.log(response)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              
            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading=false
          })
      },
      //翻页
      changepage(val){
        console.log(val)
        this.formInline.page = val
        this.getlist()
      },
      daochu:function(type){
        if(type==1){
          this.isloadquan = true
        }
        // window.location.href = '/storage/exports/20231010170342店铺50481全量领取权益导出订单.csv'
        axios.post('/api/plan-market/goods/gift/record/export',{
          is_all:type
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log(response.data.data)
              this.isloadquan = false
              window.location.href = response.data.data

              // console.log('http://118.190.155.55'+response.data.data)

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //下载模板
      xiazai:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '办理结果.xlsx');
				a.setAttribute('href', window.location.origin+window.location.pathname+'static/banlijieguo.xlsx');
				a.click();
			},
      //导入
      exportData(data) {
          // this.uploading = false
          // this.shoplog = true
          var that = this;
          let list = [];
          if(data.header[1]=='*联系电话*'){
          //导入excel
          for (var i = 0; i < data.results.length; i++) {
              var obj = {};
              // console.log(data.results[i]["*业务ID*"])
              if(data.results[i]["*业务ID*"] == undefined){
                this.$message.error('解析失败，请仔细检查必填项是否有空值！');
                return
              }
              if(data.results[i]["*业务ID*"] != undefined){
                  obj["mission_id"] = data.results[i]["*业务ID*"]
              }

              if(data.results[i]["*联系电话*"] != undefined){
                  obj["mobile"] = parseInt(data.results[i]["*联系电话*"])
              }else{
                obj["mobile"] = ''
              }
              if(data.results[i]["外呼执行人"] != undefined){
                  obj["caller_name"] = data.results[i]["外呼执行人"];
              }else{
                obj["caller_name"] = '';
              }
              if(data.results[i]["用户姓名"] != undefined){
                  obj["user_name"] = data.results[i]["用户姓名"];
              }else{
                obj["user_name"] = '';
              }
              if(data.results[i]["用户信息"] != undefined){
                obj["user_info"] = data.results[i]["用户信息"];
              }else{
                obj["user_info"] = '';
              }
              if(data.results[i]["产品名"] != undefined){
                obj["product"] = data.results[i]["产品名"];
              }else{
                obj["product"] = '';
              }
              if(data.results[i]["地址"] != undefined){
                obj["address"] = data.results[i]["地址"];
              }else{
                obj["address"] = '';
              }
              if(data.results[i]["备注1"] != undefined){
                obj["remark_one"] = data.results[i]["备注1"];
              }else{
                obj["remark_one"] = '';
              }
              if(data.results[i]["备注2"] != undefined){
                obj["remark_two"] = data.results[i]["备注2"];
              }else{
                obj["remark_two"] = '';
              }
              if(data.results[i]["备注3"] != undefined){
                obj["remark_three"] = data.results[i]["备注3"];
              }else{
                obj["remark_three"] = '';
              }
              // console.log(obj)
              list.push(obj);
          }
          this.sendform.excel = list
          this.$message.success('表格上传成功！');
          this.btnname = '更新表格'
          // this.uploading = true

          }

          if(data.header[1]=='*目标达成*'){
            //导入结果
            for (var i = 0; i < data.results.length; i++) {
                var obj = {};
                if(data.results[i]["*业务ID*"] == undefined || data.results[i]["*目标达成*"] == undefined){
                  this.$message.error('解析失败，请仔细检查必填项是否有空值！');
                  return
                }
                if(data.results[i]["*业务ID*"] != undefined){
                    obj["mission_id"] = data.results[i]["*业务ID*"]
                }
                if(data.results[i]["*目标达成*"] != undefined){
                    obj["ok"] = data.results[i]["*目标达成*"];
                }
                // console.log(obj)
                list.push(obj);
            }
            axios.post("/api/plan-market/task/result/import/v2", {id: this.id,data: list})
                .then(function(response) {
                if (response.data.msg.code == 0) {
                    that.$message.success('导入成功！');
                }else{
                    that.$message.error(response.data.msg.info);
                }
            })
          }

          if(data.header[1]!='*联系电话*' && data.header[1]!='*目标达成*' && data.header[1]!='身份证码'){
          //导入excel
          for (var i = 0; i < data.results.length; i++) {
              var obj = {};
              // if(data.results[i]["订单ID"] == undefined && data.results[i]["外部订单号"] == undefined) {
              //   this.$message.error('解析失败，请仔细检查必填项是否有空值！');
              //   return
              // }
              if(data.results[i]["订单ID"] != undefined){
                  obj["order_ids"] = data.results[i]["订单ID"]
              }else{
                obj["order_ids"] = ''
              }

              if(data.results[i]["外部订单号"] != undefined){
                  obj["source_ids"] = data.results[i]["外部订单号"]
              }else{
                obj["source_ids"] = ''
              }

              list.push(obj);
          }
          this.sendformtask.excel = list
          this.$message.success('表格上传成功！');
          this.btnname = '更新表格'

          }
          if(data.header[1]=='身份证码'){
          //导入结果
          for (var i = 0; i < data.results.length; i++) {
              var obj = {};
              // if(data.results[i]["*业务ID*"] == undefined || data.results[i]["*目标达成*"] == undefined){
              //   this.$message.error('解析失败，请仔细检查必填项是否有空值！');
              //   return
              // }
              // if(data.results[i]["*业务ID*"] != undefined){
              //     obj["mission_id"] = data.results[i]["*业务ID*"]
              // }
              // if(data.results[i]["*目标达成*"] != undefined){
              //     obj["ok"] = data.results[i]["*目标达成*"];
              // }


              if(data.results[i]["生产号码"] != undefined){
                obj["plan_mobile_produced"] = data.results[i]["生产号码"]
              }else{
                obj["plan_mobile_produced"] = ''
              }

              if(data.results[i]["身份证码"] != undefined){
                obj["id_card_num"] = data.results[i]["身份证码"]
              }else{
                obj["id_card_num"] = ''
              }

              if(data.results[i]["身份证姓名"] != undefined){
                obj["id_card_name"] = data.results[i]["身份证姓名"]
              }else{
                obj["id_card_name"] = ''
              }

              if(data.results[i]["地址"] != undefined){
                obj["address"] = data.results[i]["地址"]
              }else{
                obj["address"] = ''
              }

              if(data.results[i]["联系电话"] != undefined){
                obj["mobile"] = data.results[i]["联系电话"]
              }else{
                obj["mobile"] = ''
              }
              
              
              
              
              
              // console.log(obj)
              list.push(obj);
          }
          axios.post("/api/plan-market/call/marketing/add/data/v2", {id: this.id,data: list})
                .then(function(response) {
                if (response.data.msg.code == 0) {
                    
                    if(response.data.data.length){
                      that.isshowzjrest = true
                      that.zjfail = response.data.data.toString()
                    }else{
                      that.$message.success('导入成功！');
                    }
                }else{
                    that.$message.error(response.data.msg.info);
                }
            })
        }
      },
      change:function(val){
            this.formInline.is_finish = val
            this.formInline.page = 1
            this.getlist()
      },
      //删除任务
      deltask(id){
        var that = this
        this.$confirm('此操作将删除该任务，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/task/delete/v2?task_id='+id).then(function(response) {
            if(response.data.msg.code == 0){
              that.$message.success('删除成功！');
              that.getlist()
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
        }).catch(() => {
        });
      },
      importId(id){
        this.id = id
      },
      dload2:function(){
        const a = document.createElement('a');
        a.setAttribute('download', '导入结果模板.xlsx');
        a.setAttribute('href', this.url+'static/uploadImportResult.xlsx');
        a.click();
      },
      clearbtn(){
        this.formInline.name = ''
        this.formInline.type = ''
        this.formInline.createtime = ''
      },
      shaixuanup(){
        this.getlist()
      },
      daoruup(){
        this.getlist()
      },
      //详情
      detail(id,name){
        this.$router.push({
          path: "/callsystem/newcalls/guanlizhongxin/detail",
          query: { id: id ,name:name}
        })
      },
      wanchenggo:function(){
        axios.post('/api/plan-market/task/set/v2',{task_id:this.task_id})
          .then(response => {
            if(response.data.msg.code == 0){
              this.$message.success('已设置完成');
              this.getlist()
              this.wanchenglog = false
            }else{
              this.$message.error(response.data.msg.info);
            }
          })
      },
      wancheng:function(id){
        this.wanchenglog = true
        this.task_id = id
      },
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>
    .team .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .team .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
      padding-top: 0;
    }
    .team .teamlei {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #f4f4f4;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      color: #727272;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* padding-top: 20px; */
    }
    .powertopli_lei{
      background-color: white;
      color: #2974FF;
    }
    .t_under_line{
      width: 20px;
      height: 4px;
      background-color:#f4f4f4 ;
      border-radius: 4px;
      margin-top: 10px;
    }
    .t_under_line2{
    
      background-color:white ;
     
    }
    .t_under_line_lei{
      
      background-color:#2974FF ;
     
    }
    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    .t_search_box{
      /* padding-bottom: 20px; */
    }
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/.index .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/.index .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/.index .btn-next{ border-radius: 14px; padding: 0 10px;}
    .fenline{
      background-color: #f4f4f4;
      height: 10px;
    }
    .el-button--danger:hover{
      background-color: #2974FF;
    }
</style>
